<!DOCTYPE html>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/view/common/common.jsp" %>
<html lang="en" xmlns:c="http://www.w3.org/1999/html">
    <head>
        <meta charset="utf-8">
        <%@include file="/WEB-INF/view/common/tc_css.jsp" %>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://ht.hzc365.com/button.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    </head>
        <body style="background-color:#fbfbfb;">
        <div class="container">
        <header>
            <br>
            <form action="<C:url value="/dmz/mobile/zhihuanIndex.html"/>" method="get" id="searchform" name="searchform">
                <div class="input-group">
                    <input type="text" class="form-control" value="${parameter.entity.name}" name="entity.name" placeholder="输入你要查找的产品...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">搜索</button>
                    </span>
                </div>
            </form>
        </header>
            <br>
        <div id="banner">
            <%--<div class="seek">--%>
                <%--<input name="" value="" placeholder="请输入搜索商品名称">--%>
            <%--</div>--%>
            <div class="swiper-container banner-box">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <c:set value="${fn:split(bannerImg,'+')}" var="imgS"/>
                        <C:forEach items="${imgS}" var="img" varStatus="i">
                        <img class="banImg" src="${img}" alt="">
                        </C:forEach>
                    </div>
                </div>
            </div>
            <div class="swiper-container nav-box" style="height: 80px;margin-bottom: 36px;">
              <div class="swiper-wrapper">
                  <C:forEach items="${listType}" var="type" varStatus="i">
                    <div class="swiper-slide"  style="width: 180px;">
                        <a href="/dmz/mobile/zhihuanShowIndex.html?typeId=${type.id}" style="text-decoration:none;">
                            <div class="nonav-text">${type.name}</div>
                        </a>
                    </div>
                  </C:forEach>
              </div>
            </div>
        </div>
            <C:forEach items="${list}" var="plist">
                    <div class="goods">
                        <div class="left-box">
                            <C:forEach items="${plist}" var="pkey" varStatus="i">
                                <C:if test="${i.index==0}">
                                    <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img src="${pkey.imgFile}" alt=""></a>
                                </C:if>
                            </C:forEach>
                        </div>
                        <div class="rigth-box">
                            <C:forEach items="${plist}" var="pkey" varStatus="i">
                                <C:if test="${i.index==1}">
                                    <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img class="rigth-top" src="${pkey.imgFile}" alt=""></a>
                                </C:if>
                            </C:forEach>
                            <div class="rigth-bottom">
                                <C:forEach items="${plist}" var="pkey" varStatus="i">
                                    <C:if test="${i.index==2}">
                                        <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img class="bottom-img" src="${pkey.imgFile}" alt=""></a>
                                    </C:if>
                                </C:forEach>
                                <C:forEach items="${plist}" var="pkey" varStatus="i">
                                    <C:if test="${i.index==3}">
                                        <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img class="bottom-img" src="${pkey.imgFile}" alt=""></a>
                                    </C:if>
                                </C:forEach>
                            </div>
                        </div>
                    </div>
                    <div class="goods">
                        <div class="rigth-box">
                            <C:forEach items="${plist}" var="pkey" varStatus="i">
                                <C:if test="${i.index==4}">
                                    <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img class="rigth-top" src="${pkey.imgFile}" alt=""></a>
                                </C:if>
                            </C:forEach>
                            <div class="rigth-bottom">
                                <C:forEach items="${plist}" var="pkey" varStatus="i">
                                    <C:if test="${i.index==5}">
                                        <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img class="bottom-img" src="${pkey.imgFile}" alt=""></a>
                                    </C:if>
                                </C:forEach>
                                <C:forEach items="${plist}" var="pkey" varStatus="i">
                                    <C:if test="${i.index==6}">
                                        <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img class="bottom-img" src="${pkey.imgFile}" alt=""></a>
                                    </C:if>
                                </C:forEach>
                            </div>
                        </div>
                        <div class="left-box">
                            <C:forEach items="${plist}" var="pkey" varStatus="i">
                                <C:if test="${i.index==7}">
                                    <a href="<c:url value='/dmz/pmall/detail.html?id='/>${pkey.id}"><img src="${pkey.imgFile}" alt=""></a>
                                </C:if>
                            </C:forEach>
                        </div>
                    </div>
            </C:forEach>
        </div>

        <jsp:include page="/WEB-INF/view/common/footer.jsp"/>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
        <script>
            var banner = new Vue({
              el: '#banner',
                data:{
                    navId:20
                },
              methods: {
                greet: function (item) {
                    this.navId = item.id
                }
              }
            })
            var bannerSwiper  = new Swiper ('.banner-box', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项
                speed: 1000,
                autoplay : {
                    delay:3000
                },
            })
            var navSwiper = new Swiper('.nav-box',{
                slidesPerView: 'auto',
                loopedSlides: 8,
            })
         </script>

        <style type="text/css" media="screen">
            body {
                background:rgba(248,248,248,1);
            }
            img {
                width: 100%;
                height: 100%;
            }
            .nav-box {
                background: #ffffff;
                margin-top: 36px;
                text-align: center;
            }
            .nav-box .nav-text{
                height: 50px;
                font-size: 30px;
                color: #5ABF00;
                border-bottom: 4px #5ABF00 solid;
            }
            .nav-box .nonav-text{
                height: 50px;
                font-size: 30px;
                /*border-bottom: 4px #fff solid;*/
            }
            .nav-box .swiper-slide {
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                position: relative;
                -webkit-transition-property: -webkit-transform;
                transition-property: -webkit-transform;
                -o-transition-property: transform;
                transition-property: transform;
                transition-property: transform,-webkit-transform;
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }
            .goods {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 92%;
                padding: 0 4%;
                margin-bottom: 10px;
                height: 420px;
            }
            .left-box {
                width: 49%;
                height: 420px;
            }
            .rigth-box {
                width: 49%;
                height: 420px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                align-items: center;
            }
            .rigth-box .rigth-top {
                width: 100%;
                height: 180px;
            }
            .rigth-box .rigth-bottom {
                width: 100%;
                height: 265px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .rigth-box .rigth-bottom .bottom-img {
                width: 49%;
                height: 230px;
            }
            .seek {
                width:100%;
                height:88px;
                display: flex;
                justify-content: center;
                align-items: center;

            }
            .seek input {
                width: 92%;
                height: 56px;
                border-radius: 10px;
            }
            .swiper-container {
                width: 100%;
                height: 300px;
            }
            .banImg {
                width:100%;
                height:100%
            }
            header p {
                text-align: center;
                font-size: 14px;
                color: #666666;
                margin: 0;
                font-weight: 200;
            }

            header h1 {
                text-align: center;
                font-size: 30px;
                font-weight: 200;
                /*margin: 30px 0 10px 0;*/
            }
        </style>
    </body>
</html>